﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true"
    CodeBehind="SampleVirtualScroll.aspx.cs" Inherits="OpenWaves.ActivityFeed.Web.Tests.Samples.SampleVirtualScroll" %>

<%@ Register TagPrefix="a" Namespace="OpenWaves.ActivityFeed.Web.Controls" Assembly="OpenWaves.ActivityFeed.Web" %>
<%@ Register Src="~/Samples/SampleDescription.ascx" TagName="SampleDescription" TagPrefix="c" %>


<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="head">
    
    <style type="text/css">
        #scrolledArea
        {
            height:800px;
            overflow-y:auto;
            overflow-x: hidden;
            display: inline-block;
        }
        
        .loading {
            text-align:right;
            margin-top: -30px;
            margin-bottom: 10px;
        }

    </style>
    
    <script type="text/javascript">

        (function ($) {
            $.fn.scrollLoad = function (options) {

                var defaults = {
                    listSelector: '',
                    data: '',
                    ScrollAfterHeight: 90,
                    onload: function (data, itsMe) {
                        alert(data);
                    },
                    start: function (itsMe) { },
                    continueWhile: function () {
                        return true;
                    }
                };

                for (var eachProperty in defaults) {
                    if (options[eachProperty]) {
                        defaults[eachProperty] = options[eachProperty];
                    }
                }

                return this.each(function () {
                    this.scrolling = false;

                    $(this).bind('scroll.liveScroll', function (e) {
                        var $this = $(this);
                        if ($this.data('scrolling')) return;

                        //var totalPixels = $( this ).attr( 'scrollHeight' ) - $( this ).attr( 'clientHeight' );
                        var scrollHeight = Math.round($(this).prop('scrollTop') / ($(this).prop('scrollHeight') - $(this).prop('clientHeight')) * 100);
                        if (scrollHeight > defaults.ScrollAfterHeight) {

                            var nestedHeight = $(defaults.listSelector).height() - $(defaults.listSelector).find("li.post:last").height();

                            defaults.start.call(this, this);
                            $this.data('scrolling', true);

                            afMain.loadNextPage().then(function () {
                                $this.data('scrolling', false);
                                defaults.onload.call($this[0]);
                                if (!defaults.continueWhile.call($this[0])) {
                                    $this.unbind('scroll');
                                }
                                if (!afMain.hasMoreUpdates()) {
                                    $this.unbind('scroll.liveScroll');
                                }
                                //                              $this.height($(defaults.listSelector).height());

                                //$(this).scrollTop($(defaults.listSelector).height() - 1000);
                                //NOT WORKING WITH THIS
                                //                                $('#scrolledArea').scrollTop(nestedHeight);
                            });

                        }
                    });
                });
            };
        })(jQuery);


    function initScroll() {
        $('#scrolledArea').scrollLoad({

            listSelector: '.post-list',

            start: function () {
                $('<div class="loading"><img src="../Content/Images/ajax-loader.gif" /></div>').appendTo(this);
            },

            ScrollAfterHeight: 95, 		//this is the height in percentage

            onload: function (data) {
                $('.loading').remove();
            },

            continueWhile: function (resp) {
                //if ($(this).children('li').length >= 100) {
                //    return false;
                //}
                return true;
            }
        });
    }

    $(document).ready(function () {
        initScroll();
    });


    </script>
</asp:Content>




<asp:Content runat="server" ContentPlaceHolderID="cphBody">
    
    
<c:SampleDescription ID="SampleDescription1" runat="server">
    <MessageTemplate>
        <p>This example shows how to replace "read more..." scrolling mechanism with virtual scroll.</p>
        <p>afMain.loadNextPage() function is called unit afMain.hasMoreUpdate() return false. Then virtual scroll is disabled</p>
        <p>If you don't have many test updates use <a href="../UpdatesGenerator.aspx">Updates generator</a></p>
    </MessageTemplate>
</c:SampleDescription>

<h3>Virtual Scroll instead of "read more..."</h3>

    <div>
        <a:ActivityFeed runat="server" ID="afMain" ClientIDMode="Static" PageSize="10" FeedType="Global">
            <Template>
                <fieldset class="update" data-bind="jQuery: 'fakeInput', css: { disabled: !postUpdate.isInProgress() }">
                    <legend class="hidden-visualy">What are you doing?</legend>
                    <textarea cols="61" rows="2" data-bind="valueExt: newPostText, enable: !postUpdate.isInProgress(), valueUpdate: 'afterkeydown'"></textarea>
                    <button class="right" data-bind="command: postUpdate">Update</button>
                </fieldset>
                <div class="refresh-updates">
                    <button data-bind="click: refreshUpdates">Refresh updates</button></div>
                <div class="stream_filter" style="display: none">
                    <textarea style="overflow: hidden;" class="watermark" data-bind="value: searchTerm" title="Write a message..."></textarea>
                    <button class="btn_default" data-bind="click: searchUpdates">
                        <span><b>Search</b></span>
                    </button>
                </div>
                
                <div id="scrolledArea" data-bind="visible: updates().length > 0">
                    <a:updatesplaceholder cssclass="post-list" runat="server" />
                </div>
            </Template>
        </a:ActivityFeed>
    </div>
</asp:Content>
